<template>
	<view>
	<u-navbar back-text="首页" :customBack="back" backIconName=" " :backTextStyle="backTextColor"
		backIconColor="#39CCCC" :background="background">
		<view class="search-wrap" @click="toSearch">
			<u-search height="56" :showAction="false"></u-search>
		</view>
	</u-navbar>
	<view class="home u-p-b-0">
			<view class="u-demo-block__content">
				<view class="u-page__upload-item">
				<u-upload :upload-text="uploadText"  :before-remove="beforeRemove" ref="uUpload" :custom-btn="customBtn" :show-upload-list="showUploadList" :action="action" :auto-upload="autoUpload" :file-list="fileList"
				 :show-progress="showProgress" :deletable="deletable" :max-count="maxCount" @on-list-change="onListChange" :source-type="sourceType"
				@on-oversize="onOversize" @on-remove="onRemove" @on-success="onSuccess" @on-error="onUploadError" @on-uploaded="onUploaded" @on-choose-fail="onChooseFail" @on-choose-complete="onChooseComplete"
				 >
					<view v-if="customBtn" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<u-icon name="photo" size="60" :color="$u.color['lightColor']"></u-icon>
					</view>
				</u-upload>
				<!-- <u-button :custom-style="{marginTop: '20rpx'}" @click="upload">上传</u-button>
				<u-button :custom-style="{marginTop: '40rpx'}" @click="clear">清空列表</u-button> -->
				</view>
			</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {// top
				scrollTop: 0,
				modeTop: 'circle',
				bottomTop: 200,
				rightTop: 40,
				top: 400,
				iconTop: 'arrow-up',
				iconStyleTop: {
					color: '#111',
					fontSize: '36rpx'
				},
				customStyle: {
					backgroundColor: '#fff',
					color: '#111'
				},
				tips: '顶部',
				page: 1,
				rowSize: 4,
				background: this.TopColor,
				backTextColor: {
					'color': '#ffffff'
				},
				sourceType:['camera'],
				action: this.$db.domain() + "/pkg/yumpkg.action?mine=all",
				// 预置上传列表
				fileList: [],
				showUploadList: true,
				customBtn: false,
				autoUpload: this.$db.get("photoAutoUpload"),
				showProgress: true,
				deletable: true,
				customStyle: false,
				maxCount: 9,
				uploadText:"拍照上传",
				link_URL: ""
			}
		},
		onReady() {
		},
		onLoad(e) {
			// this.$nextTick(()=>{
			//     this.$refs.uUpload.selectFile()
			// })
			this.$db.set('show_wf',false);
			if(e.type == "piaoju"){
				console.log("camera:", e);
			}
		},
		onShow() {
			const app = getApp();
			const params = app.globalData.tabParams;
			if (params) {
				console.log('接收参数:', params);
				this.saveLinkURL = params.link_URL;
				this.cameraType = params.cameraType;
				
				if(this.cameraType == "piaoju"){
					this.sourceType = ['camera', 'album'];
				}else{
					this.sourceType = ['camera'];
				}
				
				// 使用后清除参数（避免重复获取）
				delete app.globalData.tabParams;
			}else{
				this.saveLinkURL = "/kim/marker/asNew.action"
				this.$nextTick(()=>{
				    this.$refs.uUpload.selectFile()
				});
			}
		},
		methods: {
			back() { // 首页
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			toSearch() {
				this.$common.navigateTo('/pages/index/search')
			},
			toMainIndex(){
				this.sourceType = ['camera'];
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			savePhoto(path) {
				if(this.$db.get("savePhotoToAlbum")){
					uni.saveImageToPhotosAlbum({
						filePath: path, // 图片路径
						success: function () {
						  uni.showToast({ title: '保存成功', icon: 'success' });
						},
						fail: function (err) {
						  console.error('保存失败', err);
						  uni.showToast({ title: '保存失败', icon: 'none' });
						}
					});
				}
			},
			reUpload() {
				this.$refs.uUpload.reUpload();
			},
			clear() {
				this.$refs.uUpload.clear();
			},
			autoUploadChange(index) {
				this.autoUpload = index == 0 ? true : false;
			},
			controlChange(index) {
				if(index == 0) {
					this.showProgress = true;
					this.deletable = true;
				} else {
					this.showProgress = false;
					this.deletable = false;
				}
			},
			maxCountChange(index) {
				this.maxCount = index == 0 ? 1 : index == 1 ? 2 : 4;
			},
			customStyleChange(index) {
				if (index == 0) {
					this.showUploadList = false;
					this.customBtn = true;
					
				} else {
					this.showUploadList = true;
					this.customBtn = false;
				}
			},
			upload() {
				this.$refs.uUpload.upload();
			},
			deleteItem(index) {
				console.log("index:",index)
				this.$refs.uUpload.remove(index);
			},
			onOversize(file, lists) {
				// console.log('onOversize', file, lists);
			},
			onPreview(url, lists) {
				console.log('onPreview', url, lists);
			},
			onRemove(index, lists) {
				console.log('onRemove', index, lists);
			},
			onSuccess(data, index, lists) {
				console.log('onSuccess', data, index, lists);
				console.log('upload To Server : ',this.action);
				let json = data.replaceAll("&quot;","\"");
				console.log("json:",json)
				let pkg = JSON.parse(json);
				let param = {};
				if(pkg && pkg.pkgFileCnt > 0){
					param.pkgIDs = pkg.pkgIDs.join(",")
				}
				
				this.$api.post(this.saveLinkURL,param).then(res =>{
					if(res && res.errorCode == 1000){
						this.$refs.uUpload.showToast("上传成功");
						this.clear();
						uni.switchTab({
							url: "/pages/index/index"
						})
					}
				});
			},
			onUploadError(res, index, lists, name){
				this.$refs.uUpload.showToast("上传失败了");
			},
			onChange(res, index, lists) {
				// console.log('onChange', res, index, lists);
			},
			error(res, index, lists) {
				// console.log('onError', res, index, lists);
			},
			onProgress(res, index, lists) {
				console.log('onProgress', res, index, lists);
			},
			onUploaded(lists) {
				console.log('onUploaded', lists);
			},
			onListChange(lists) {
				// console.log('onListChange', lists);
				this.lists = lists;
			},
			beforeRemove(index, lists) {
				return true;
			},
			onChooseComplete(lists,name){
				console.log("onChooseComplete:",lists,name);
				this.savePhoto(lists[0].url);
			},
			onChooseFail(e) {
				console.log(e,"取消上传");
				this.sourceType = ['camera'];
				if(e.errCode == 2){ // device busy
					return true;
				}
				return true;
			}
		}
	}
</script>

<style lang="scss">
	.u-page {
		&__upload-item{
			margin-top:5px;
		}
	}
</style>

<style lang="scss">
	.search-wrap {
		margin: 0 30rpx 0 10rpx;
		flex: 1;
	}

	.grid-text {
		font-size: 20rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	.title {
		font-weight: bold;
		font-size: 30rpx;
		padding-bottom: 20rpx;
	}
	
	.fw{
		font-weight: bold;
	}

	.f7 {
		background-color: #f7f7f7;
	}
</style>